<template>
	<view >

		<view class="" v-show="is_init">

		<!-- 	<view class="u-flex" style="position: fixed;top: 44px;width: 750rpx;background-color: #000;height: 30px;
			justify-content: center;
			">
				<text style="color: red;font-weight: 800;">提示:长按删除或右下角一键清空</text>
			</view> -->

			<template v-if="code==0">
				<view class=""
					style="width: 750rpx;height: 300px;display: flex;justify-content: center;align-items: center;">
					<text>未登陆！！！</text>
				</view>
			</template>
			<template v-else>
				 
				<view class="" v-for="(item,index) in list" :key="index"
					style="padding: 10px;border-bottom: solid #F5F5F5 2rpx;">
					<view @click="on_views(item,index)" @longtap="onLongPress(item,index)" class=""
						style="display: flex;align-items: center;justify-content: space-between;">
						<view class="">
							<text style="color: #333;">{{item.title}}</text>
							<view class="" style="padding-top: 5px;">
								<text style="color: #D3D3D3;">{{item.time|timeStamp}}</text>
							</view>
						</view>
						<view class="" style="display: flex;justify-content: center;align-items: center;">
							<view class="" v-if="item.read_type==0">
								<text style="color: red;">未读</text>
							</view>
							<view class="">
								<u-icon name="arrow-right" style="color: #333;margin-top: 5px;"
									class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>

							</view>
						</view>
					</view>
					<!-- 	<view class="u-flex" style="width: 100%;justify-content: flex-end;">
						<view class="u-flex" 
						style="width: 120rpx;height: 50rpx;background-color: #DCDCDC;justify-content: center;border-radius: 55rpx;color: #fff;">
							 <text>删除</text>
						</view>
					</view> -->
				</view>
				<view v-if="list.length==0" class=""
					style="width: 750rpx;height: 300px;display: flex;justify-content: center;align-items: center;">
					<text style="color: #C0C0C0;">暂无消息提醒</text>
				</view>
			</template>
			
			<view class="" style="position: fixed;bottom: 100px;right: 40px;">
				<view @click="set_del" class="u-flex" 
				style="width: 90rpx;height: 90rpx;background-color: #D3D3D3;border-radius: 96rpx;color: #fff;
				justify-content: center;">
	 
					<text>清空</text>
				</view>
			</view>
		</view>
	 
		<view class="" v-show="!is_init">

		</view>
	</view>
</template>

<script>
	import {
		getMsglog,
		isloginlog,
		getMsglogdel,
		getMsglogdels
	} from '@/api/index.js'
	import mixin from "@/libs/mixin.js";
	export default {
		mixins: [mixin],
		data() {
			return {
				list: [],
				code: '',
				is_init: false
			}
		},
		onLoad() {
			this.page = 1;
			this.getMsglog();
		},

		filters: {
			timeStamp: function(num) {
				num = num * 1000;
				let date = new Date(num);

				let y = date.getFullYear();

				let MM = date.getMonth() + 1;

				MM = MM < 10 ? ('0' + MM) : MM; //月补0

				let d = date.getDate();

				d = d < 10 ? ('0' + d) : d; //天补0

				let h = date.getHours();

				h = h < 10 ? ('0' + h) : h; //小时补0

				let m = date.getMinutes();

				m = m < 10 ? ('0' + m) : m; //分钟补0

				let s = date.getSeconds();

				s = s < 10 ? ('0' + s) : s; //秒补0

				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;

			}
		},
		onShow() {

	 
			this.init_login();

		},
		methods: {
			set_del(){
				var that = this;
				uni.showModal({ 
					title: '提示',
					content: '确认要清空吗？',
					success: function(res) {
						if (res.confirm) {
							that.is_dels();
						}
					}
				});
			},
			is_dels() {
				var that = this;
				getMsglogdels({
					token: this.$store.state.app.token,
				 
				}).then(res => {
			
					if (res.list.err == 1) {
						return
					}
					that.list = [];
				}).catch(err => {
			
				});
			},
			// 长按删除
			onLongPress(e, index) {
				var that = this;
				uni.showModal({ 
					title: '提示',
					content: '是否删除此消息',
					success: function(res) {
						if (res.confirm) {
							that.is_del(e.id, index);
						}
					}
				});
			},
			is_del(id, index) {
				var that = this;
				getMsglogdel({
					token: this.$store.state.app.token,
					z_id: id,
				}).then(res => {

					if (res.list.err == 1) {
						return
					}
					that.list = that.list.filter(t => t.id != id);
				}).catch(err => {

				});
			},

			on_views(item, index) {
				this.list[index]['read_type'] = 1;
				uni.navigateTo({
					url: './msg_view?id=' + item.id
				})
			},
			getMsglog() {
				getMsglog({
					token: this.$store.state.app.token,
					page: this.page
				}).then(res => {

					if (res.list.err == 1) {
						this.$utils.redirectTo('/login/phone-login', {});
						this.code = 0;
						his.is_init = true;
						return
					}

					if (this.page == 1) {
						this.list = res.list.list;
					} else {
						if (res.list.list.length > 0) {
							for (var i = 0; i < res.list.list.length; i++) {
								this.list.push(res.list.list[i]);
							}
						} else {
							this.jiazai = "没有数据了";
						}
					}

					this.code = 200;
					this.is_init = true;


				}).catch(err => {

				});
			},
			init_login() {
				var that = this;
				isloginlog({
					token: this.$store.state.app.token
				}).then(res => {
					if (res.list.count > 0) {
						that.getMsglog();
						var count = res.list.count.toString()
						uni.setTabBarBadge({
							index: 2,
							text: count
						})
						return
					}
					uni.hideTabBarRedDot({
						index: 2
					})

				}).catch(err => {

				});
			},

		},
		onReachBottom() {
			this.jiazai = "加载中...";
			this.page = this.page + 1;
			this.getMsglog();
		},
	}
</script>

<style>

</style>